<template>
<div class="invoiceList">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
    </template>
    <el-form inline :model="model">
      <el-form-item label="发票类型:">
        <y-code-select
          v-model="model.orderType"
          clearable
          dict="ORDER_TYPE"></y-code-select>
      </el-form-item>
      <el-form-item label="开票状态:">
        <el-select v-model="model.status" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="170">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-upload
            v-if="row.status === '1'"
            ref="yUpload"
            action=""
            :show-file-list="false"
            :http-request="() => {}"
            :multiple="false"
            :on-change="onUploadChange"
            :limit="1"
            accept="image/*, application/pdf"
            :auto-upload="false">
            <el-button type="primary" size="mini" @click="showInvoice(row)">开票</el-button>
          </el-upload>
          <el-button v-if="row.status === '0'" size="mini" @click="displayInvoice(row)">预览</el-button>
          <el-button size="mini" @click="showDetail(row)">订单详情</el-button>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <el-dialog
    :visible.sync="views.show"
    width="800px"
    @opened="openedInvoice"
    @closed="closeInvoice">
    <template v-if="!!views.url">
      <iframe
        v-if="views.currentRow.contentUrl.endsWith('pdf')"
        :src="views.url"
        frameborder="0" style="width: 100%; height: 530px">
      </iframe>
      <img v-else width="100%" :src="views.url" alt="">
    </template>
  </el-dialog>
  <el-drawer
    :visible.sync="viewForms.showForm"
    title="订单详情"
    :size="1000"
    destroy-on-close>
    <component
      :is="generateDetail()"
      v-if="viewForms.currentForm && viewForms.currentForm.orderId"
      :order-id="viewForms.currentForm.orderId"
      @close-drawer="viewForms.showForm = false"
      @refresh="search"></component>
  </el-drawer>
</div>
</template>

<script>
import goodsOrderInfo from "@/views/goods/goodsOrderDetails/goodsOrderInfo";
import adoptOrderInfo from "@/views/adopt/adoptOrderDetails/adoptOrderInfo";

export default {
  name: "invoiceList",
  inject: ['defaultUploadChange', 'generateMediaUrl', 'getDictNameSync', 'getEnum'],
  components: { goodsOrderInfo, adoptOrderInfo },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.applet.invoiceList,
        param: this.model
      }
    }
  },
  data(){
    return {
      statusOptions: this.getEnum('invoiceStatus'),
      model:{
        orderType: '',
        status: ''
      },
      currentId: '',
      views:{
        currentRow: null,
        url: null,
        show: false
      },
      viewForms:{
        currentForm: {},
        showForm: false,
      },
      columns: [{
        label: '申请人',
        prop: 'createUserName'
      },{
        label: '申请时间',
        prop: 'createTime',
        formatter(row){
          return (row.createTime || '').replace('T', ' ');
        }
      },{
        label: '订单号',
        prop: 'orderSn'
      },{
        label: '发票类型',
        prop: 'orderType',
        formatter: (function(row){
          return this.getDictNameSync(row.orderType, 'ORDER_TYPE')
        }).bind(this)
      },{
        label: '开票状态',
        prop: 'status',
        formatter: (function(row){
          return this.$$getArrayName(row.status, this.statusOptions, {
            label: 'label', value: 'value'
          })
        }).bind(this)
      },{
        label: '开票时间',
        prop: 'updateTime',
        formatter(row){
          return (row.updateTime || '').replace('T', ' ');
        }
      }]
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    showInvoice(row){
      this.currentId = row.id;
    },
    displayInvoice(row){
      this.views.currentRow = row;
      this.views.show = true;
    },
    showDetail(row){
      this.$set(this.viewForms, 'currentForm', row);
      this.viewForms.showForm = true;
    },
    generateDetail(){
      if(this.viewForms.currentForm){
        if(this.viewForms.currentForm.orderType === 'ORDER_TYPE_MALL') return 'goodsOrderInfo';
        if(this.viewForms.currentForm.orderType === 'ORDER_TYPE_ADOPT') return 'adoptOrderInfo';
      }
      return '';
    },
    openedInvoice(){
      if(this.views.currentRow.contentUrl){
        this.views.url = this.generateMediaUrl({
          fileOpenUrl: this.views.currentRow.contentUrl
        })
      }else{
        this.views.url = '';
      }
    },
    onUploadChange(fileObj){
      if(!fileObj.raw.type.startsWith('image/') && fileObj.raw.type !== 'application/pdf'){
        this.$message({
          type: 'warning',
          message: '只允许上传图片或pdf'
        });
        this.$refs['yUpload'].clearFiles();
        return false;
      }
      this.defaultUploadChange(fileObj, info => {
        this.$yAxios({
          url: this.$api.applet.makeInvoice,
          data: {
            id: this.currentId,
            contentUrl: info.fileOpenUrl,
            contentId: info.id
          },
          loading: true
        }, () => {
          this.$message({
            type: 'success',
            message: '保存成功'
          });
          this.search();
        })
      })
    },
    closeInvoice(){
      this.views.currentRow = null;
      this.views.url = null;
    }
  }
}
</script>

<style scoped>

</style>